<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 引用模板 template</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <my-world></my-world>
    <hr>
    <my-world></my-world>
</div>

<!-- 不要把模板写到挂载实例里 -->
<template id="tem">
    <!-- <template>必须有且只有一个根元素 -->
    <div>
        <h3>{{msg}}</h3>
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>
</template>

<script>

    let vm = new Vue({ // 这里的vm也是一个组件，称为根组件Root
        el: "#app",
        components: {
            'my-world': {
                name: "date171208", // 指定组件的名称，默认为标签名，可以不设置
                template: "#tem",
                data() {
                    return {
                        msg: '欢迎来到北京',
                        arr: ['tom', 'jack', 'mike']
                    }
                }
            }
        }
    })
</script>
</body>
</html>